<template>
  <el-card class="content">
    <el-form :model="query" ref="formRef" :inline="true">
      <el-form-item label="开始时间:">
        <el-date-picker
          type="datetime"
          placeholder="选择开始日期"
          default-time="00:00:00"
          size="mini"
          v-model="startTime"
          :picker-options="pickerOptions0"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间:">
        <el-date-picker
          type="datetime"
          placeholder="选择结束日期"
          default-time="00:00:00"
          size="mini"
          v-model="endTime"
          :picker-options="pickerOptions0"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="统计时间类型:" v-if="this.query.monitorTypeId == 3">
        <el-select v-model="query.timeType" size="mini">
          <el-option label="静态10分钟" value="s_1h"></el-option>
          <el-option label="动态10分钟" value="10m"></el-option>
          <el-option label="动态1小时" value="1h"></el-option>
          <el-option label="动态2小时" value="2h"></el-option>
          <el-option label="动态6小时" value="6h"></el-option>
          <el-option label="动态24小时" value="24h"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计时间类型:" v-if="this.query.monitorTypeId == 4">
        <el-select v-model="query.timeType" size="mini">
          <el-option label="每10分钟" value="10m"></el-option>
          <el-option label="每1小时" value="1h"></el-option>
          <el-option label="每24小时" value="24h"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计时间类型:" v-if="this.query.monitorTypeId == 6">
        <el-select v-model="query.timeType" size="mini">
          <el-option label="1小时" value="1h"></el-option>
          <el-option label="1天" value="24h"></el-option>
          <el-option label="1周" value="7"></el-option>
          <el-option label="1月" value="30"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          size="mini"
          type="primary"
          @click="getMonitorDataResponseGpList"
          >查询</el-button
        >
      </el-form-item>
      <br />
      <el-form-item label="监测类型:">
        <el-select
          v-model="query.monitorTypeId"
          clearable
          placeholder="请选择监测类型"
          @change="selectGoodsByGroupId($event)"
          size="mini"
        >
          <el-option
            v-for="item in monitorTypeList"
            :key="item.monitorTypeId"
            :value="item.monitorTypeId"
            :label="item.typeName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="站点名称:">
        <el-select
          v-model="query.monitorId"
          clearable
          placeholder="请选择站点名称"
          size="mini"
          @change="changeCharts($event)"
        >
          <el-option
            v-for="item in monitorList"
            :key="item.monitorId"
            :value="item.monitorId"
            :label="item.monitorName"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <p class="data" v-show="onlineMonitorShow">暂无数据</p>
    <div
      id="OnlineMonitor"
      v-show="onlineMonitorShows"
      style="height: 66vh"
    ></div>
  </el-card>
</template>
<script>
import moment from "moment";
import echarts from "echarts";
import {
  getAllMonitoringAndMonitoringType,
  getMonitorDataResponseGp,
} from "../../../api/api";
export default {
  name: "OnlineMonitor",
  props: {
    node: Object,
  },
  data() {
    return {
      onlineMonitorShow: false,
      onlineMonitorShows: true,
      query: {
        page: 1,
        pagesize: 10,
        monitorTypeId: "",
        monitorId: "",
        timeType: "",
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      startTime: moment().subtract(1, "month").format("YYYY-MM-DD 00:00:00"),
      endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      monitorTypeList: [],

      monitorList: [],
      myChart: null,
      onlineList: [],
    };
  },
  mounted() {
    this.getAllMonitoringAndMonitoringType();
  },
  methods: {
    // 获取监测类型及监测
    async getAllMonitoringAndMonitoringType() {
      const res = await getAllMonitoringAndMonitoringType({
        tailingPondId: sessionStorage.getItem("sensorId"),
      });
      if (res.resultCode == "200") {
        this.monitorTypeList = res.parameter;
        this.query.monitorTypeId = this.monitorTypeList[0].monitorTypeId;
        this.query.monitorId =
          this.monitorTypeList[0].monitoringList[0].monitorId;
        this.selectGoodsByGroupId(this.query.monitorTypeId);
        this.getMonitorDataResponseGpList();
      } else {
        this.$message({
          message: "暂无数据",
          offset: 400,
          duration: 1000,
        });
      }
    },
    changeCharts() {
      this.getMonitorDataResponseGpList();
    },
    async getMonitorDataResponseGpList() {
      var myChart = echarts.init(document.getElementById("OnlineMonitor"));
      myChart.showLoading();
      let queryData = {
        startTime: moment(this.startTime).format("YYYY-MM-DD 00:00:00"),
        endTime: moment(this.endTime).format("YYYY-MM-DD HH:mm:ss"),
      };
      const res = await getMonitorDataResponseGp({
        startTime: queryData.startTime,
        endTime: queryData.endTime,
        monitorTypeId: this.query.monitorTypeId,
        monitorId: this.query.monitorId,
        timeType: this.query.timeType,
      });
      if (res.resultCode == 200) {
        this.onlineMonitorShows = true;
        this.onlineMonitorShow = false;
        this.onlineList = res.parameter.list;
        if (this.onlineList !== null) {
          if (this.query.monitorTypeId === 3) {
            myChart.clear();
            var xdata = [];
            var ydata = [];
            var hdata = [];
            var pdata = [];
            var timeData = [];
            var firstLevel = [];
            var firstLevel1 = [];
            var secondLevel = [];
            var secondLevel1 = [];
            var thirdLevel = [];
            var thirdLevel1 = [];
            var tunnelDepthList = [];
            var tunnelDepthList1 = [];
            for (let i = 0; i < this.onlineList.length; i++) {
              var obj1 = new Object();
              obj1.value = Number(this.onlineList[i].totalX).toFixed(2);
              xdata[i] = obj1;
              var obj2 = new Object();
              obj2.value = Number(this.onlineList[i].totalY).toFixed(2);
              ydata[i] = obj2;
              var obj3 = new Object();
              obj3.value = Number(this.onlineList[i].totalH).toFixed(2);
              hdata[i] = obj3;
              var obj4 = new Object();
              obj4.value = Number(this.onlineList[i].totalP).toFixed(2);
              pdata[i] = obj4;
              var obj5 = new Object();
              obj5.value = this.onlineList[i].theDate;
              timeData[i] = obj5;
              if (res.parameter.firstLevel !== null) {
                var obj6 = new Object();
                obj6.value = res.parameter.firstLevel;
                firstLevel[i] = obj6;
                firstLevel[i].value = firstLevel[i].value.toFixed(2);
                var obj7 = new Object();
                obj7.value = res.parameter.firstLevel;
                firstLevel1[i] = obj7;
                firstLevel1[i].value = -firstLevel1[i].value.toFixed(2);
              }
              if (res.parameter.secondLevel !== null) {
                var obj8 = new Object();
                obj8.value = res.parameter.secondLevel;
                secondLevel[i] = obj8;
                secondLevel[i].value = secondLevel[i].value.toFixed(2);
                var obj9 = new Object();
                obj9.value = res.parameter.secondLevel;
                secondLevel1[i] = obj9;
                secondLevel1[i].value = -secondLevel1[i].value.toFixed(2);
              }
              if (res.parameter.thirdLevel !== null) {
                var obj10 = new Object();
                obj10.value = res.parameter.thirdLevel;
                thirdLevel[i] = obj10;
                thirdLevel[i].value = thirdLevel[i].value.toFixed(2);
                var obj11 = new Object();
                obj11.value = res.parameter.thirdLevel;
                thirdLevel1[i] = obj11;
                thirdLevel1[i].value = -thirdLevel1[i].value.toFixed(2);
              }
              if (res.parameter.tunnelDepthList !== null) {
                var obj12 = new Object();
                obj12.value = res.parameter.tunnelDepthList;
                tunnelDepthList[i] = obj12;
                tunnelDepthList[i].value = tunnelDepthList[i].value.toFixed(2);
                var obj13 = new Object();
                obj13.value = res.parameter.tunnelDepthList;
                tunnelDepthList1[i] = obj13;
                tunnelDepthList1[i].value =
                  -tunnelDepthList1[i].value.toFixed(2);
              }
            }
            var maxTotalX = Math.max.apply(
              null,
              xdata.map(function (o) {
                return o.value;
              })
            );
            var maxTotalY = Math.max.apply(
              null,
              ydata.map(function (o) {
                return o.value;
              })
            );
            var maxTotalH = Math.max.apply(
              null,
              hdata.map(function (o) {
                return o.value;
              })
            );
            var maxTotalP = Math.max.apply(
              null,
              pdata.map(function (o) {
                return o.value;
              })
            );
            var maxFirstLevel = Math.max.apply(
              null,
              firstLevel.map(function (o) {
                return o.value;
              })
            );
            var maxList = [];
            maxList.push(
              maxTotalX,
              maxTotalY,
              maxTotalH,
              maxTotalP,
              maxFirstLevel
            );
            var max = Math.max.apply(
              null,
              maxList.map(function (o) {
                return o;
              })
            );
            let chartOption = {
              tooltip: {
                trigger: "axis",
                formatter(params) {
                  let tip = params[0].name + "<br/>";
                  for (let y = 0; y < params.length; y++) {
                    tip +=
                      params[y].marker +
                      params[y].seriesName +
                      " : " +
                      params[y].value +
                      "mm<br/>";
                  }
                  return tip;
                },
              },
              color: [
                "#33a3dc",
                "#0000CC",
                "#464547",
                "#7744FF",
                "#CC0000",
                "#FF8800",
                "#EEEE00",
                "#00DDDD",
              ],
              legend: {
                top: 30,
                itemHeight: 2,
                data: [
                  { name: "在线监测-∆X", icon: "rect" },
                  { name: "在线监测-∆Y", icon: "rect" },
                  { name: "在线监测-∆H", icon: "rect" },
                  { name: "在线监测-∆P", icon: "rect" },
                  { name: "红色预警", icon: "rect" },
                  { name: "橙色预警", icon: "rect" },
                  { name: "黄色预警", icon: "rect" },
                  { name: "蓝色预警", icon: "rect" },
                ],
                selected: {
                  "在线监测-∆X": false,
                  "在线监测-∆Y": false,
                  "在线监测-∆H": false,
                },
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
              },
              toolbox: {
                right: "5%",
                show: true,
                feature: {
                  saveAsImage: { show: true },
                },
              },
              xAxis: {
                name: "时间",
                nameLocation: "center",
                nameTextStyle: {
                  padding: [10, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
                },
                type: "category",
                boundaryGap: false,
                data: timeData,
              },
              yAxis: {
                name: "位移(mm)",
                type: "value",
                max: Math.ceil(max * 1.5),
                min: Math.ceil(-1.5 * max),
              },
              series: [
                {
                  name: "在线监测-∆X",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#33a3dc",
                    type: "solid",
                  },
                  data: xdata,
                },
                {
                  name: "在线监测-∆Y",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#0000CC",
                    type: "solid",
                  },
                  data: ydata,
                },
                {
                  name: "在线监测-∆H",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#464547",
                    type: "solid",
                  },
                  data: hdata,
                },
                {
                  name: "在线监测-∆P",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#7744FF",
                    type: "solid",
                  },
                  data: pdata,
                },
                {
                  name: "红色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#CC0000",
                    type: "solid",
                  },
                  data: firstLevel,
                },
                {
                  name: "红色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#CC0000",
                    type: "solid",
                  },
                  data: firstLevel1,
                },
                {
                  name: "橙色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#FF8800",
                    type: "solid",
                  },
                  data: secondLevel,
                },
                {
                  name: "橙色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#FF8800",
                    type: "solid",
                  },
                  data: secondLevel1,
                },
                {
                  name: "黄色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#EEEE00",
                    type: "solid",
                  },
                  data: thirdLevel,
                },
                {
                  name: "黄色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#EEEE00",
                    type: "solid",
                  },
                  data: thirdLevel1,
                },
                {
                  name: "蓝色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#00DDDD",
                    type: "solid",
                  },
                  data: tunnelDepthList,
                },
                {
                  name: "蓝色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#00DDDD",
                    type: "solid",
                  },
                  data: tunnelDepthList1,
                },
              ],
            };
            myChart.hideLoading();
            myChart.setOption(chartOption, true);
            setTimeout(function () {
              window.onresize = function () {
                myChart.resize();
              };
            }, 200);
          } else if (this.query.monitorTypeId === 4) {
            myChart.clear();
            let passageway1 = "";
            let passageway2 = "";
            let passageway3 = "";
            let passageway4 = "";
            let passageway5 = "";
            if (this.onlineList[0].dataList[0]) {
              passageway1 = "01通道";
            } else {
              passageway1 = 1;
            }
            if (this.onlineList[0].dataList[1]) {
              passageway2 = "02通道";
            } else {
              passageway2 = 2;
            }
            if (this.onlineList[0].dataList[2]) {
              passageway3 = "03通道";
            } else {
              passageway3 = 3;
            }
            if (this.onlineList[0].dataList[3]) {
              passageway4 = "04通道";
            } else {
              passageway4 = 4;
            }
            if (this.onlineList[0].dataList[4]) {
              passageway5 = "05通道";
            } else {
              passageway5 = 5;
            }
            var data = [];
            var data2 = [];
            var data3 = [];
            var data4 = [];
            var data5 = [];
            var timeData = [];
            for (let i = 0; i < this.onlineList.length; i++) {
              for (let j = 0; j < this.onlineList[i].dataList.length; j++) {
                const lists = this.onlineList[i].dataList[j];
                if (lists.tunnel == "01") {
                  var obj1 = new Object();
                  obj1.value = Number(lists.xdata).toFixed(2);
                  data[i] = obj1;
                }
                if (lists.tunnel == "02") {
                  var obj2 = new Object();
                  obj2.value = Number(lists.xdata).toFixed(2);
                  data2[i] = obj2;
                }
                if (lists.tunnel == "03") {
                  var obj3 = new Object();
                  obj3.value = Number(lists.xdata).toFixed(2);
                  data3[i] = obj3;
                }
                if (lists.tunnel == "04") {
                  var obj4 = new Object();
                  obj4.value = Number(lists.xdata).toFixed(2);
                  data4[i] = obj4;
                }
                if (lists.tunnel == "05") {
                  var obj5 = new Object();
                  obj5.value = Number(lists.xdata).toFixed(2);
                  data5[i] = obj5;
                }
              }
              var obj6 = new Object();
              obj6.value = this.onlineList[i].theDate;
              timeData[i] = obj6;
            }
            var maxDataX1 = Math.max.apply(
              null,
              data.map(function (o) {
                return o.value;
              })
            );
            var maxDataX2 = Math.max.apply(
              null,
              data2.map(function (o) {
                return o.value;
              })
            );
            var maxDataX3 = Math.max.apply(
              null,
              data3.map(function (o) {
                return o.value;
              })
            );
            var maxList = [];
            maxList.push(maxDataX1, maxDataX2, maxDataX3);
            console.log(maxList);
            var max = Math.max.apply(
              null,
              maxList.map(function (o) {
                return o;
              })
            );
            let chartOption = {
              tooltip: {
                trigger: "axis",
                formatter(params) {
                  let tip = params[0].name + "<br/>";
                  for (let y = 0; y < params.length; y++) {
                    tip +=
                      params[y].marker +
                      params[y].seriesName +
                      " : " +
                      params[y].value +
                      "mm<br/>";
                  }
                  return tip;
                },
              },
              color: ["#5599FF", "#FF0000", "#FFCC22", "#66DD00", "#CC00CC"],
              legend: {
                top: 30,
                itemHeight: 2,
                data: [
                  { name: passageway1, icon: "rect" },
                  { name: passageway2, icon: "rect" },
                  { name: passageway3, icon: "rect" },
                  { name: passageway4, icon: "rect" },
                  { name: passageway5, icon: "rect" },
                ],
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
              },
              toolbox: {
                right: "5%",
                show: true,
                feature: {
                  saveAsImage: { show: true },
                },
              },
              xAxis: {
                name: "时间",
                nameLocation: "center",
                nameTextStyle: {
                  padding: [10, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
                },
                type: "category",
                boundaryGap: false,
                data: timeData,
              },
              yAxis: {
                name: "位移(mm)",
                type: "value",
                max: Math.ceil(-max * 2),
                min: Math.ceil(18 * max),
              },
              series: [
                {
                  name: "01通道",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#5599FF",
                    type: "solid",
                  },
                  data: data,
                },
                {
                  name: "02通道",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#CC00CC",
                    type: "solid",
                  },
                  data: data2,
                },
                {
                  name: "03通道",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#FF0000",
                    type: "solid",
                  },
                  data: data3,
                },
                {
                  name: "04通道",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#FFCC22",
                    type: "solid",
                  },
                  data: data4,
                },
                {
                  name: "05通道",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#66DD00",
                    type: "solid",
                  },
                  data: data5,
                },
              ],
            };
            myChart.hideLoading();
            myChart.setOption(chartOption, true);
            setTimeout(function () {
              window.onresize = function () {
                myChart.resize();
              };
            }, 200);
          } else if (this.query.monitorTypeId === 6) {
            myChart.clear();
            var manualDate = [];
            var timeData = [];
            var firstLevel = [];
            var secondLevel = [];
            var thirdLevel = [];
            var tunnelDepthList = [];
            for (let i = 0; i < this.onlineList.length; i++) {
              var obj1 = new Object();
              obj1.value = Number(this.onlineList[i].data).toFixed(3);
              manualDate[i] = obj1;
              var obj2 = new Object();
              obj2.value = this.onlineList[i].theDate;
              timeData[i] = obj2;
              if (res.parameter.firstLevel !== null) {
                var obj3 = new Object();
                obj3.value = res.parameter.firstLevel;
                firstLevel[i] = obj3;
                firstLevel[i].value = firstLevel[i].value.toFixed(2);
              }
              if (res.parameter.secondLevel !== null) {
                var obj4 = new Object();
                obj4.value = res.parameter.secondLevel;
                secondLevel[i] = obj4;
                secondLevel[i].value = secondLevel[i].value.toFixed(2);
              }
              if (res.parameter.thirdLevel !== null) {
                var obj5 = new Object();
                obj5.value = res.parameter.thirdLevel;
                thirdLevel[i] = obj5;
                thirdLevel[i].value = thirdLevel[i].value.toFixed(2);
              }
              if (res.parameter.tunnelDepthList !== null) {
                var obj6 = new Object();
                obj6.value = res.parameter.tunnelDepthList;
                tunnelDepthList[i] = obj6;
                tunnelDepthList[i].value = tunnelDepthList[i].value.toFixed(2);
              }
            }
            let option = {
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
              },
              color: ["#CC0000", "#FF8800", "#EEEE00", "#00DDDD"],
              legend: {
                data: [
                  {
                    name: "降雨量",
                    icon: "rect",
                  },
                  {
                    name: "红色预警",
                    icon: "line",
                  },
                  {
                    name: "橙色预警",
                    icon: "line",
                  },
                  {
                    name: "黄色预警",
                    icon: "line",
                  },
                  {
                    name: "蓝色预警",
                    icon: "line",
                  },
                ],
                top: 20,
              },
              tooltip: {
                trigger: "axis",
                formatter(params) {
                  let tip = params[0].name + "<br/>";
                  for (let y = 0; y < params.length; y++) {
                    tip +=
                      params[y].marker +
                      params[y].seriesName +
                      " : " +
                      params[y].value +
                      " mm<br/>";
                  }
                  return tip;
                },
              },
              toolbox: {
                show: true,
                feature: {
                  saveAsImage: { show: true },
                },
              },
              calculable: true,
              xAxis: [
                {
                  type: "category",
                  data: timeData,
                  name: "时间",
                  nameLocation: "center",
                  nameTextStyle: {
                    padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
                  },
                },
              ],
              yAxis: [
                {
                  name: "数值(mm)",
                  type: "value",
                  min: 0,
                },
              ],
              series: [
                {
                  name: "降雨量",
                  type: "bar",
                  // barWidth: 20,
                  data: manualDate,
                  itemStyle: {
                    color: "#33CCFF", //设置所有柱状图颜色
                  },
                },
                {
                  name: "红色预警",
                  type: "line",
                  data: firstLevel,
                  lineStyle: {
                    color: "#CC0000",
                    type: "solid",
                  },
                },
                {
                  name: "橙色预警",
                  type: "line",
                  data: secondLevel,
                  lineStyle: {
                    color: "#FF8800",
                  },
                },
                {
                  name: "黄色预警",
                  type: "line",
                  data: thirdLevel,
                  lineStyle: {
                    color: "#EEEE00",
                  },
                },
                {
                  name: "蓝色预警",
                  type: "line",
                  data: tunnelDepthList,
                  lineStyle: {
                    color: "#00DDDD",
                  },
                },
              ],
              grid: {
                y2: 80,
              },
            };
            myChart.hideLoading();
            myChart.setOption(option);
            setTimeout(function () {
              window.onresize = function () {
                myChart.resize();
              };
            }, 200);
          } else {
            myChart.clear();
            if (
              this.query.monitorTypeId == 1 ||
              this.query.monitorTypeId == 2
            ) {
              var yName = "长度(m)";
            } else if (this.query.monitorTypeId == 5) {
              var yName = "单位(m)";
            }
            var manualDate = [];
            var timeData = [];
            var firstLevel = [];
            var secondLevel = [];
            var thirdLevel = [];
            var tunnelDepthList = [];
            for (let i = 0; i < this.onlineList.length; i++) {
              var obj1 = new Object();
              obj1.value = Number(this.onlineList[i].data).toFixed(3);
              manualDate[i] = obj1;
              var obj2 = new Object();
              obj2.value = this.onlineList[i].theDate;
              timeData[i] = obj2;
              if (res.parameter.firstLevel !== null) {
                var obj3 = new Object();
                obj3.value = res.parameter.firstLevel;
                firstLevel[i] = obj3;
                firstLevel[i].value = firstLevel[i].value.toFixed(2);
              }
              if (res.parameter.secondLevel !== null) {
                var obj4 = new Object();
                obj4.value = res.parameter.secondLevel;
                secondLevel[i] = obj4;
                secondLevel[i].value = secondLevel[i].value.toFixed(2);
              }
              if (res.parameter.thirdLevel !== null) {
                var obj5 = new Object();
                obj5.value = res.parameter.thirdLevel;
                thirdLevel[i] = obj5;
                thirdLevel[i].value = thirdLevel[i].value.toFixed(2);
              }
              if (res.parameter.tunnelDepthList !== null) {
                var obj6 = new Object();
                obj6.value = res.parameter.tunnelDepthList;
                tunnelDepthList[i] = obj6;
                tunnelDepthList[i].value = tunnelDepthList[i].value.toFixed(2);
              }
            }
            let chartOption = {
              tooltip: {
                trigger: "axis",
                formatter(params) {
                  let tip = params[0].name + "<br/>";
                  for (let y = 0; y < params.length; y++) {
                    tip +=
                      params[y].marker +
                      params[y].seriesName +
                      " : " +
                      params[y].value +
                      "m<br/>";
                  }
                  return tip;
                },
              },
              color: ["#33CCFF", "#FF0000", "#FF7744", "#FFCC22", "#5599FF"],
              legend: {
                top: 30,
                itemHeight: 2,
                data: [
                  { name: "在线监测", icon: "rect" },
                  { name: "红色预警", icon: "rect" },
                  { name: "橙色预警", icon: "rect" },
                  { name: "黄色预警", icon: "rect" },
                  { name: "蓝色预警", icon: "rect" },
                ],
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
              },
              toolbox: {
                right: "5%",
                show: true,
                feature: {
                  saveAsImage: { show: true },
                },
              },
              xAxis: {
                name: "时间",
                nameLocation: "center",
                nameTextStyle: {
                  padding: [10, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
                },
                type: "category",
                boundaryGap: false,
                data: timeData,
              },
              yAxis: {
                name: yName,
                type: "value",
              },
              series: [
                {
                  name: "在线监测",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#5599FF",
                    type: "solid",
                  },
                  data: manualDate,
                },
                {
                  name: "红色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#FF0000",
                    type: "solid",
                  },
                  data: firstLevel,
                },
                {
                  name: "橙色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#FFCC22",
                    type: "solid",
                  },
                  data: secondLevel,
                },
                {
                  name: "黄色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#66DD00",
                    type: "solid",
                  },
                  data: thirdLevel,
                },
                {
                  name: "蓝色预警",
                  type: "line",
                  yAxisIndex: 0,
                  lineStyle: {
                    color: "#CC00CC",
                    type: "solid",
                  },
                  data: tunnelDepthList,
                },
              ],
            };
            myChart.hideLoading();
            myChart.setOption(chartOption, true);
            setTimeout(function () {
              window.onresize = function () {
                myChart.resize();
              };
            }, 200);
          }
        } else {
          this.onlineMonitorShows = false;
          this.onlineMonitorShow = true;
        }
      } else {
        this.onlineMonitorShows = false;
        this.onlineMonitorShow = true;
        this.$message({
          message: "暂无数据",
          offset: 400,
          duration: 1000,
        });
      }
    },
    selectGoodsByGroupId(val) {
      this.monitorList = [];
      if (this.query.monitorTypeId == 3) {
        this.query.timeType = "s_1h";
      } else if (this.query.monitorTypeId == 4) {
        this.query.timeType = "10m";
      } else if (this.query.monitorTypeId == 6) {
        this.query.timeType = "1h";
      } else {
        this.query.timeType = null;
      }
      for (let i = 0; i < this.monitorTypeList.length; i++) {
        if (
          val == this.monitorTypeList[i].monitorTypeId &&
          val != null &&
          val != "" &&
          val != undefined
        ) {
          for (
            let j = 0;
            j < this.monitorTypeList[i].monitoringList.length;
            j++
          ) {
            if (this.monitorTypeList[i].monitoringList != null) {
              this.monitorList.push(this.monitorTypeList[i].monitoringList[j]);
            } else {
              this.monitorList = [];
            }
          }
          this.query.monitorId = this.monitorList[0].monitorId;
        }
      }
      this.getMonitorDataResponseGpList();
    },
  },
  //数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
  watch: {
    //观察option的变化
    chartOption: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal);
          } else {
            this.myChart.setOption(oldVal);
          }
        } else {
          myChart.setOption(chartOption);
        }
      },
      deep: true, //对象内部属性的监听，关键。// watch 监听 merchant.province，当城市选择后，再次换省份时，能清空已选择的城市
    },
  },
};
</script>
<style scoped>
.content {
  height: 87vh;
  margin-left: 0.08rem;
  overflow: auto;
}
.data {
  text-align: center;
}
</style>